<template>
  <div class="custom-scrollbar-container">
    <div
      class="custom-scrollbar"
      @mousedown="startDrag"
      :style="{ top: scrollbarTop + 'px' }"
    ></div>
    <div class="line"></div>
    <div class="content" @scroll="handleScroll">
      <!-- 你的内容 -->
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
        <li>36</li>
        <li>37</li>
        <li>38</li>
        <li>39</li>
        <li>40</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "CustomScrollbar",
  data() {
    return {
      scrollbarTop: 20,
      scrollbarHeight: 0,
      contentHeight: 500,
      containerHeight: 1000,
      isDragging: false,
    };
  },
  mounted() {
    this.calculateDimensions();
    window.addEventListener("resize", this.calculateDimensions);
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.calculateDimensions);
  },
  methods: {
    calculateDimensions() {
      this.containerHeight = this.$el.clientHeight;
      this.contentHeight = this.$el.querySelector(".content").scrollHeight;
      this.scrollbarHeight =
        (this.containerHeight * this.containerHeight) / this.contentHeight;
      // 修正滚动条高度的计算
      this.thumbHeight =
        (this.containerHeight / this.contentHeight) * this.containerHeight;
      this.updateScrollbarPosition();
    },

    handleScroll(event) {
      if (!this.isDragging) {
        this.updateScrollbarPosition(event.target.scrollTop + 5);
      }
    },
    updateScrollbarPosition(scrollTop = 5) {
      const maxScrollbarTop = this.containerHeight - 20;
      this.scrollbarTop = Math.min(
        maxScrollbarTop,
        (scrollTop / (this.contentHeight - this.containerHeight)) *
          maxScrollbarTop
      );
    },
    startDrag(event) {
      event.preventDefault();
      this.isDragging = true;
      document.addEventListener("mousemove", this.drag);
      document.addEventListener("mouseup", this.stopDrag);
    },
    drag(event) {
      if (this.isDragging) {
        const offsetY = event.clientY - this.$el.getBoundingClientRect().top;
        const maxScrollbarTop = this.containerHeight - 10;
        this.scrollbarTop = Math.min(Math.max(0, offsetY), maxScrollbarTop);
        // this.$el.querySelector(".content").scrollTop =
        //   (this.scrollbarTop * (this.contentHeight - this.containerHeight))
        //   maxScrollbarTop;
        this.$el.querySelector(".content").scrollTop =
          (this.scrollbarTop / maxScrollbarTop) *
          (this.contentHeight - this.containerHeight);
      }
    },
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener("mousemove", this.drag);
      document.removeEventListener("mouseup", this.stopDrag);
    },
  },
};
</script>

<style scoped>
.custom-scrollbar-container {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.content {
  border: 1px solid red;
  overflow-y: scroll;
  height: 600px;
  width: 600px;
}
.line {
  position: absolute;
  width: 1px;
  height: 96%;
  background-color: red;
  right: 20.7%;
  display: flex;
  align-items: center;
}

.custom-scrollbar {
  position: absolute;
  right: 20%;
  width: 12px;
  height: 12px;
  background-color: red;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.7;
}

.custom-scrollbar:hover {
  background-color: #555;
}
</style>
